<template>
  <div
    style="
      border-radius: 4px;
      padding-bottom: 20px;
      width: 100%;
      min-height: 100%;
      overflow: auto;
      text-align: left;
      padding-left: 5%;
      padding-right: 5%;
      background-color: snow;
      box-shadow: 2px 2px 5px #909090;
    "
    v-title
    data-title="支付订单"
  >
    <div class="pay-main">
      <!-- <el-button type="primary" icon="el-icon-phone">测试</el-button> -->
      <div class="pay-container">
        <div class="checkout-tit">
          <h4 class="tit-txt">
            <span class="success-icon"></span>
            <span class="success-info"
              >订单提交成功，请您及时付款，以便尽快为您发货~~</span
            >
          </h4>
          <div class="paymark" style="text-align: left">
            <span class="fl">
              请您在提交订单半小时之内完成支付，超时订单会自动取消。
            </span>
            <span class="fr">
              <span class="lead">应付金额：</span>
              <span class="orange money">￥{{ money }}</span>
            </span>
          </div>
        </div>
        <div class="checkout-info">
          <h4>重要说明：</h4>
          <div style="display: flex; justify-content: space-between">
            <ol style="width: 50%">
              <li>
                书湘商城支付平台目前支持<span class="zfb">支付宝</span
                >支付方式。
              </li>
              <li>其它支付渠道正在调试中，敬请期待。</li>
              <li>为了保证您的购物支付流程顺利完成，请保存以下支付宝信息。</li>
            </ol>
            <div style="width: 40%; padding-left: 16%; margin: auto">
              <div style="font-size: 14px; color: #666">
                剩余支付时间（超时自取消订单）
              </div>
              <div class="time" style="color: red">
                <i class="el-icon-time"></i> {{ time.min }}分钟 {{ time.sec }}秒
              </div>
            </div>
          </div>
          <h4>
            支付宝账户信息：（很重要，<span class="save">请保存！！！</span>）
          </h4>
          <ul>
            <li>支付帐号：11111111</li>
            <li>密码：111111</li>
            <li>支付密码：111111</li>
          </ul>
        </div>
        <div class="checkout-steps">
          <div class="step-tit">
            <h5>书币支付</h5>
          </div>
          <div class="step-cont">
            <ul class="payType">
              <div
                class="payChoose"
                @click="choosed = '书币'"
                :class="choosed == '书币' ? 'active' : 'payChoose'"
                style="padding: 0; margin: 0"
              >
                <div
                  style="
                    width: 166px;
                    height: 55px;
                    margin: auto;
                    display: flex;
                    color: black;
                  "
                >
                  <h4 style="margin: auto">书币支付</h4>
                </div>
              </div>
              <span>(书币余额：{{ this.user.coinCount }})</span>
            </ul>
          </div>
          <div class="hr"></div>
          <div class="step-tit">
            <h5>支付平台</h5>
          </div>
          <div class="step-cont">
            <ul class="payType">
              <li
                @click="choosed = '支付宝'"
                class="payChoose"
                :class="choosed == '支付宝' ? 'active' : 'payChoose'"
              >
                <img src="./images/pay2.jpg" />
              </li>
              <li
                class="payChoose"
                @click="choosed = '微信'"
                :class="choosed == '微信' ? 'active' : 'payChoose'"
              >
                <img src="./images/pay3.jpg" />
              </li>
            </ul>
          </div>
          <div class="hr"></div>
          <div class="payshipInfo">
            <div class="step-tit">
              <h5>支付网银</h5>
            </div>
            <div class="step-cont">
              <ul class="payType">
                <li
                  class="payChoose"
                  @click="choosed = '招商'"
                  :class="choosed == '招商' ? 'active' : 'payChoose'"
                >
                  <img src="./images/pay10.jpg" />
                </li>
                <li
                  class="payChoose"
                  @click="choosed = '邮储'"
                  :class="choosed == '邮储' ? 'active' : 'payChoose'"
                >
                  <img src="./images/pay11.jpg" />
                </li>
                <li
                  class="payChoose"
                  @click="choosed = '交通'"
                  :class="choosed == '交通' ? 'active' : 'payChoose'"
                >
                  <img src="./images/pay12.jpg" />
                </li>
                <li
                  class="payChoose"
                  @click="choosed = '农业'"
                  :class="choosed == '农业' ? 'active' : 'payChoose'"
                >
                  <img src="./images/pay13.jpg" />
                </li>
                <li
                  class="payChoose"
                  @click="choosed = '广发'"
                  :class="choosed == '广发' ? 'active' : 'payChoose'"
                >
                  <img src="./images/pay14.jpg" />
                </li>
                <li
                  class="payChoose"
                  @click="choosed = '兴业'"
                  :class="choosed == '兴业' ? 'active' : 'payChoose'"
                >
                  <img src="./images/pay15.jpg" />
                </li>
                <li
                  class="payChoose"
                  @click="choosed = '光大'"
                  :class="choosed == '光大' ? 'active' : 'payChoose'"
                >
                  <img src="./images/pay16.jpg" />
                </li>
                <li
                  class="payChoose"
                  @click="choosed = '中信'"
                  :class="choosed == '中信' ? 'active' : 'payChoose'"
                >
                  <img src="./images/pay17.jpg" />
                </li>
                <li
                  class="payChoose"
                  @click="choosed = '浦发'"
                  :class="choosed == '浦发' ? 'active' : 'payChoose'"
                >
                  <img src="./images/pay18.jpg" />
                </li>
                <li
                  class="payChoose"
                  @click="choosed = '平安'"
                  :class="choosed == '平安' ? 'active' : 'payChoose'"
                >
                  <img src="./images/pay19.jpg" />
                </li>
                <li
                  class="payChoose"
                  @click="choosed = '民生'"
                  :class="choosed == '民生' ? 'active' : 'payChoose'"
                >
                  <img src="./images/pay20.jpg" />
                </li>
                <li
                  class="payChoose"
                  @click="choosed = '北京'"
                  :class="choosed == '北京' ? 'active' : 'payChoose'"
                >
                  <img src="./images/pay21.jpg" />
                </li>
                <li
                  class="payChoose"
                  @click="choosed = '北京农'"
                  :class="choosed == '北京农' ? 'active' : 'payChoose'"
                >
                  <img src="./images/pay22.jpg" />
                </li>
              </ul>
            </div>
          </div>
          <div class="hr"></div>
          <div class="submit">
            <a class="btn" @click="payOrder">立即支付</a>
          </div>
          <el-dialog
            title="确认身份"
            :visible.sync="visable"
            width="30%"
            :before-close="handleClose"
            center
          >
            <div style="margin-bottom: 10px">
              <span style="margin-bottom: 10px; color: black; font-size: 16px">
                请输入您的账号密码以确认身份
              </span>
            </div>
            <el-input
              show-password
              @input="passwordInput"
              type="password"
              placeholder="请输入密码"
              v-model="password"
              style="width: 80%"
            />
            <div style="width: 100%; text-align: center; margin-top: 10px">
              <el-button type="success" @click="sure">确认支付</el-button>
            </div>
          </el-dialog>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import api from "../../api";
import { mapState, mapMutations } from "vuex";
export default {
  name: "Pay",
  data() {
    return {
      orderNum: "",
      money: "",
      choosed: "",
      orderIds: "",
      qrCode: "",
      creatTime: "",
      password: "",
      visable: false,
      time: {
        day: "",
        hr: "",
        min: "",
        sec: "",
      },
    };
  },
  computed: {
    ...mapState("login", ["user"]),
  },
  methods: {
    ...mapMutations("login", ["setUser"]),
    sure() {
      if (this.password == "") {
        this.$message.error("请输入您的登录密码");
        return;
      }
      let login = new URLSearchParams();
      login.append("account", this.user.name);
      login.append("pswd", this.password);
      api.tryLogin(login).then((res) => {
        if (res.data == "") {
          this.$message.error("密码错误!支付取消");
          this.visable = false;
          this.password = "";
          return;
        } else {
          let params = new URLSearchParams();
          params.append("orderIds[]", this.orderIds);
          params.append("totalNum", this.money);
          params.append("userId", this.user.userId);
          api.payWithCoin(params).then((res) => {
            if (res.data) {
              // this.loading();
              let param = new URLSearchParams();
              param.append("userId", this.user.userId);
              api.getPersonalInfo(param).then((res) => {
                this.setUser(res.data);
                localStorage.setItem("shuXiang", JSON.stringify(res.data));
              });
              this.$router.push({
                path: "/paysuccess",
                query: {
                  orderIds: res.data,
                },
              });
            }
          });
        }
      });
    },
    passwordInput(val) {
      let codeReg = new RegExp("[A-Za-z0-9~!@#$%&*()_+-=<>,.?;:]+"), //正则 英文+数字+特殊字符；
        len = val.length,
        str = "";
      for (var i = 0; i < len; i++) {
        if (codeReg.test(val[i])) {
          str += val[i];
        }
      }
      this.password = str;
    },
    payOrder() {
      if (this.choosed == "") {
        this.$message.error("请选择支付方式");
      } else if (this.choosed == "支付宝") {
        let params = new URLSearchParams();
        params.append("orderIds[]", this.orderIds);
        console.log(this.orderIds);
        params.append("totalNum", this.money);
        params.append("returnURL", "http://8.130.171.48:8080/#/paysuccess");
        params.append("restMinutes", "");
        api.getOrderPayQrCode(params).then((res) => {
          console.log(res.data);
          this.qrCode = res.data;
          this.$router.push({
            path: "/paying",
            query: {
              qrCode: this.qrCode,
            },
          });
        });
      } else if (this.choosed == "书币") {
        if (this.user.coinCount < this.money) {
          this.$message({
            type: "error",
            message: "书币余额不足，请选择其他支付方式",
          });
        } else {
          this.visable = true;
        }
      } else {
        this.$message({
          type: "warning",
          message: "暂不支持该支付方式",
        });
      }
    },
    countdown() {
      const end = this.creatTime + 30 * 60 * 1000;
      const now = Date.parse(new Date());
      const msec = end - now;
      if (msec < 0) return;
      let day = parseInt(msec / 1000 / 60 / 60 / 24);
      let hr = parseInt((msec / 1000 / 60 / 60) % 24);
      let min = parseInt((msec / 1000 / 60) % 60);
      let sec = parseInt((msec / 1000) % 60);
      this.time.day = day;
      this.time.hr = hr > 9 ? hr : "0" + hr;
      this.time.min = min > 9 ? min : "0" + min;
      this.time.sec = sec > 9 ? sec : "0" + sec;
      const that = this;
      if (min >= 0 && sec >= 0) {
        //倒计时结束关闭订单
        if (min == 0 && sec == 0) {
          this.$message({
            type: "warning",
            message: "订单超时，即将返回主页",
          });
          setTimeout(function () {
            that.$router.push({ path: "/home" });
          }, 3000);
          return;
        }
        setTimeout(function () {
          that.countdown();
        }, 1000);
      }
    },
    loading() {
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      setTimeout(() => {
        loading.close();
      }, 2000);
    },
    handleClose(done) {
      this.password = "";
      done();
    },
  },
  mounted() {
    this.countdown();
  },
  created() {
    if (!this.$route.query.money) {
      this.$router.push({ path: "/" });
    }
    this.orderIds = this.$route.query.orderIds;
    console.log(this.orderIds);
    this.money = this.$route.query.money;
    this.creatTime = this.$route.query.time - 0;
  },
};
</script>

<style lang="less" scoped>
.pay-main {
  margin-bottom: 20px;
  text-align: left;
  .pay-container {
    margin: 0 auto;
    width: 100%;
    a:hover {
      color: #4cb9fc;
    }
    .orange {
      color: #e1251b;
    }
    .money {
      font-size: 18px;
    }
    .zfb {
      color: #e1251b;
      font-weight: 700;
    }
    .checkout-tit {
      padding: 10px;
      .tit-txt {
        font-size: 14px;
        line-height: 21px;
        .success-icon {
          width: 30px;
          height: 30px;
          display: inline-block;
          background: url(./images/icon.png) no-repeat 0 0;
        }
        .success-info {
          padding: 0 8px;
          line-height: 30px;
          vertical-align: top;
        }
      }
      .paymark {
        overflow: hidden;
        line-height: 26px;
        // text-indent: 38px;
        .fl {
          float: left;
        }
        .fr {
          float: right;
          .lead {
            margin-bottom: 18px;
            font-size: 15px;
            font-weight: 400;
            line-height: 22.5px;
          }
        }
      }
    }
    .checkout-info {
      padding-left: 25px;
      padding-bottom: 15px;
      margin-bottom: 10px;
      border: 2px solid #e1251b;
      h4 {
        margin: 9px 0;
        font-size: 14px;
        line-height: 21px;
        color: #e1251b;
      }
      ol {
        padding-left: 25px;
        list-style-type: decimal;
        line-height: 24px;
        font-size: 14px;
      }
      ul {
        padding-left: 25px;
        list-style-type: disc;
        line-height: 24px;
        font-size: 14px;
      }
    }
    .checkout-steps {
      border: 1px solid #ddd;
      padding: 25px;
      .hr {
        height: 1px;
        background-color: #ddd;
      }
      .step-tit {
        line-height: 36px;
        margin: 15px 0;
      }
      .step-cont {
        margin: 0 10px 12px 20px;
        ul {
          font-size: 16px;
          .payChoose {
            margin: 2px;
            display: inline-block;
            padding: 5px 20px;
            border: 1px solid #ddd;
            cursor: pointer;
            line-height: 18px;
          }
          .payChoose.active {
            margin: 2px;
            display: inline-block;
            padding: 5px 20px;
            border: 1px solid #ddd;
            cursor: pointer;
            line-height: 18px;
            border: 1px solid red;
          }
        }
      }
    }
    .submit {
      text-align: center;
      .btn {
        display: inline-block;
        padding: 15px 45px;
        margin: 15px 0 10px;
        font: 18px "微软雅黑";
        font-weight: 700;
        border-radius: 0;
        background-color: #e1251b;
        border: 1px solid #e1251b;
        color: #fff;
        text-align: center;
        vertical-align: middle;
        cursor: pointer;
        user-select: none;
        text-decoration: none;
      }
    }
    ::v-deep .el-dialog__header {
      border-bottom: 0.5px solid rgba(63, 58, 58, 0.753);
    }
  }
}
</style>